<template>
  <div class="header-box">
    <div class="header row">
      <div class="col-xs-3 text-left"><span v-if="returnStatus" @click="$router.go(-1)">返回</span></div>
      <div class="col-xs-6">{{ headerTitle }}</div>
      <div class="col-xs-3"></div>
    </div>
    <div class="user-info row" v-if="userInfo">
      <div class="col-xs-8">用户名：{{ username }}</div>
      <div class="col-xs-4 text-right">
        <button class="btn btn-primary"><router-link to="/login" style="color: #fff;">退出</router-link></button>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapActions,mapGetters} from 'vuex';
  import {userContent} from '../service/getData';
  export default{
    data(){
      return {
        headerTitle:'',
        returnStatus:false,
        username:null
      }
    },
    props:['userInfo'], //也可从父组件传递子组件数据，来控制header
    computed:{
      ...mapGetters([
        'headerStatus'
      ])
    },
    mounted(){
      let _this = this;
      this.$nextTick(function(){
        setTimeout(_this.headers,30);
        _this.username = userContent.userInfo.name;
      })
    },
    methods:{
      headers(){
        this.headerTitle = this.headerStatus.headerTitle;
        this.returnStatus = this.headerStatus.returnStatus;
        //console.log(this.headerStatus);
      }
    }
  }
</script>
<style scoped lang="less">
  @import "../style/main";
  .header{
    height: 1.95rem;
    background: @headerBg;
    text-align: center;
    line-height: 1.95rem;
    .fontAndColor(0.65rem,#fff);
  }
  .user-info{
    height: 2.95rem;
    line-height: 2.95rem;
    border-bottom:1px #eee solid;
    .fontAndColor(0.6rem,#000);
  }
</style>
